import { Card, Pagination } from 'antd';
import equal from "deep-equal"
import { toJS } from 'mobx';
import { WeaLocaleProvider, WeaZmage, WeaTools, WeaTextarea, WeaError, WeaInputLocale } from 'ecCom';
import ViewContactLogItemStore from './../../stores/ViewContactLogItemStore';
import ContactRemarkItems from './ContactRemarkItems'
import { inject, observer } from 'mobx-react';
// import './../../style/index';
// import './../../util/index';
const { viewer } = WeaTools;
const getLabel = WeaLocaleProvider.getLabel;
const getCurrentLabel = WeaInputLocale.getCurrentLabel;
@observer
export default class ViewContactLogItem extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            store: new ViewContactLogItemStore(),
        }
    }
    componentWillMount() {
        const { store } = this.state;
        const { doInit } = store;
        doInit(this);
    }
    componentWillReceiveProps(nextProps) {
        // console.log(nextProps);
        const { store } = this.state;
        const { updateProps } = store;
        updateProps(nextProps);
    }
    button = {
        width: "50px",
        textAlign: "center",
        cursor: "pointer",
        color: "#fff",
        marginLeft: "5px",
        marginBottom: "0px",
        marginTop: "5px"
    }
    render() {

        const { store } = this.state;
        const { inputValue, setInputValue, contactLoges, saveRemarkCmd, remarks = [], show, setShow, getContactLogsRemark } = store;
        const { createrImg, createrNameLink, description, sellchanceid, sellchancename, sellchancename1, tempcontacterid, contacterName, requestid, requestName, docid, docName,
            projectid, projectName, fileid, fileName, imgsid, createdatetime, id, remark, jobtitle, createrid, crmname, crmid, contactWay, contacterName1
        } = contactLoges;
        const { datas = [], msgCode, status } = remark;
        // console.log(toJS(description));
        // console.log(toJS(datas));
        let imgArr = [];
        let imgArea = [];
        let totalImgCount = 0;
        if (imgsid != "") {
            imgArr = imgsid.split(",");
            totalImgCount = imgArr.length;
            let imgs = [];
            for (let i = 0; i < totalImgCount; i++) {
                let styled = {};
                const imgUrl = "/weaver/weaver.file.FileDownload?fileid=" + imgArr[i] + "";
                styled.backgroundImage = "url(" + imgUrl + ")";

                const img1Props = {
                    src: imgUrl,
                    width: 0,
                    height: 0,
                    className: "formImgPlay"
                };

                imgs.push(<div src={imgUrl} className="customer-contact-imgitem" style={styled} onClick={() => { jQuery("#img_" + imgArr[i]).click() }}><img id={"img_" + imgArr[i]} data-imgsrc={img1Props.src} {...img1Props} onClick={viewer} /></div>);
            }
            imgArea.push(<div className="customer-contact-imgs">{imgs}</div>);
        }
        return (
            <Card className="view-contactlog-card" style={{ flexGrow: "1", flexShrink: "1" }} >
                <div style={{ padding: "0 10px" }}>
                    <div className="card-right-hrm"><span dangerouslySetInnerHTML={{ __html: createrNameLink }}></span><span style={{ color: "#B7B7B7", marginLeft: "15px" }}>{jobtitle}</span></div>
                    <div className="feedbackrelate">
                        <div style={{ wordBreak: "break-word" }} dangerouslySetInnerHTML={{ __html: description.replace(/&lt;/g, "<").replace(/&gt;/, ">") }} onClick={(e) => { setShow(!show); e.stopPropagation(); }}></div>
                        {crmid && <div className="relatetitle">{getLabel(783, "相关客户")}:&nbsp;<a onClick={() => {
                            window.open(`/spa/crm/static/index.html#/main/crm/customerView?customerId=${crmid}`, "_blank");
                        }}>{crmname}</a></div>}
                        {sellchanceid && <div className="relatetitle">{getLabel(84372, "相关商机")}:&nbsp;<a onClick={() => {
                            window.open(`/spa/crm/static/index.html#/main/crm/chanceView/${crmid}/0/${sellchanceid}`, "_blank");
                        }}>{sellchancename1}</a></div>}
                        {tempcontacterid && <div className="relatetitle">{getLabel(84373, "相关联系人")}:&nbsp;<a onClick={() => {
                            window.open(`/spa/crm/static/index.html#/main/crm/contacterView?contacterId=${tempcontacterid}`, "_blank");
                        }}>{contacterName1}</a></div>}
                        {requestid && <div className="relatetitle">{getLabel(1044, "相关流程")}:&nbsp;<span dangerouslySetInnerHTML={{ __html: requestName }}></span></div>}
                        {docid && <div className="relatetitle">{getLabel(857, "相关文档")}:&nbsp;<span dangerouslySetInnerHTML={{ __html: docName }}></span></div>}
                        {projectid && <div className="relatetitle">{getLabel(782, "相关项目")}:&nbsp;<span dangerouslySetInnerHTML={{ __html: projectName }}></span></div>}
                        {fileid && <div className="relatetitle">{getLabel(22194, "相关附件")}:&nbsp;<span dangerouslySetInnerHTML={{ __html: fileName }}></span></div>}
                        {imgsid && <div className="relatetitle">{getLabel(500718, "相关图片")}:&nbsp;<div>{imgArea}</div></div>}
                        {contactWay && <div>{getLabel(15858, "联系方式")}:&nbsp;<span>{getCurrentLabel(contactWay)}</span></div>}
                    </div>
                    <div style={{ display: "flex", height: "22px" }}>
                        <span style={{ color: "#b3a6b3" }}>{createdatetime}</span>
                        <div style={{ display: "flex", margin: "0 0 0 auto" }}>
                            <div style={{ cursor: "pointer", textAlign: "right", color: "#555555" }} onClick={(e) => { setShow(!show); e.stopPropagation(); }}>
                                <img src="/images/ecology9/crm/icon_reply_02.png" style={{ width: "18px", height: "18px", marginTop: "2px" }} />
                                <div style={{ height: "18px", lineHeight: "22px", verticalAlign: "middle", float: "right", cursor: "pointer", marginLeft: "5px" }}>
                                    {getLabel(675, "评论")}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                {show && <div>
                    <WeaError tipPosition='top' ref='weaError' error={getLabel(514759, "评论内容为空")} style={{ width: "100%" }}>
                        <WeaTextarea value={inputValue} onChange={setInputValue} />
                    </WeaError>
                    <div style={{ margin: "10px 5px", display: "flex" }}>
                        <button onClick={(e) => { saveRemarkCmd({ workPlanId: id, parentId: 0, receiver: createrid, customer: crmid, sellchanceid: sellchanceid, contacterid: tempcontacterid }); e.stopPropagation(); }} style={{ backgroundColor: " #67B5E9", border: "1px #50A9E4 solid", ...this.button }}>{getLabel(826, "确定")}</button>
                        <button onClick={(e) => { setShow(false); e.stopPropagation(); }} style={{ backgroundColor: " #919191", ...this.button }}  > {getLabel(201, "取消")}</button>
                    </div>
                </div>
                }
                {toJS(remarks).length > 0 && <ContactRemarkItems
                    datas={toJS(remarks)}
                    getContactLogsRemark={getContactLogsRemark}
                    otherParams={{ sellchanceid: sellchanceid, contacterid: tempcontacterid }}
                />}
                <div className="clear"></div>
            </Card>
        );
    }
}
